<template>
  <div class="app-container customer-div">
    <el-menu :default-active="tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="myCharge">我负责的</el-menu-item>
      <el-menu-item index="share">共享（师徒）</el-menu-item>
      <el-menu-item index="department" v-if="departmentPL">部门（军团）</el-menu-item>
      <el-menu-item index="common">公海</el-menu-item>
      <el-menu-item index="delete">回收站</el-menu-item>
      <el-menu-item index="60">保留产品线</el-menu-item>
      <el-menu-item index="70">客户查询</el-menu-item>
      <el-menu-item index="80" v-if="goodsLineExamine">产品线审核</el-menu-item>
      <el-menu-item index="90" v-if="moveExamine">转移审核</el-menu-item>
      <el-menu-item index="myManageGoodsLines" v-if="productLineCustomerManagement">产品线客户管理</el-menu-item>
    </el-menu>

    <!--数据列表-->
    <div class="table-container">
      <el-radio-group v-model="type" style="margin-bottom:20px;" size="small" @change="changeType" v-if="tab != 'common' && tab != 'delete' && tab != '60' && tab != '70' && tab != '80'&& tab != '90' && tab != 'myManageGoodsLines'">
        <el-radio-button label="customer">按客户</el-radio-button>
        <el-radio-button label="line">按产品线</el-radio-button>
        <el-radio-button label="docking" v-if="tab == 'myCharge'">转售客户</el-radio-button>
        <el-radio-button label="sub" v-if="tab == 'myCharge'">子客户</el-radio-button>

      </el-radio-group>

      <!--按客户-->
      <customerListPL ref="customerListPL" v-if="(tab == 'myCharge' || tab == 'share' || tab == 'department')&& (type == 'customer' || type== 'docking' || type=='sub')"></customerListPL>
      <!--按产品线-->
      <lineListPL ref="lineListPL" v-if="((tab == 'myCharge' || tab == 'share' || tab == 'department') && type == 'line') || tab=='myManageGoodsLines'"></lineListPL>
      <!--按公海回收站客户-->
      <allCustomerListPL ref="allCustomerListPL" v-if="(tab == 'common' || tab == 'delete')&& type == 'customer'"></allCustomerListPL>
      <!--按公海回收站产品线-->
      <allLineListPL ref="allLineListPL" v-if="(tab == 'common' || tab == 'delete') && type == 'line'"></allLineListPL>

      <!--保留产品线-->
      <retainPL v-if="tab == 60" ref="retainPL"></retainPL>
      <!--客户查询-->
      <customerSearchPL v-if="tab == 70" ref="customerSearchPL"></customerSearchPL>

      <!--产品线审核-->
      <goodsLineExamine v-if="tab == 80" ref="goodsLineExamine"></goodsLineExamine>

      <!--转移审核-->
      <moveExamine v-if="tab == 90" ref="moveExamine"></moveExamine>

    </div>



  </div>
</template>
<script>
import store from '@/store'
import { mapGetters } from 'vuex'
import {getUserOption, inputDriverInfo} from "../../api/partner";
import retainPL from './components/retainPL'
import customerSearchPL from './components/customerSearchPL'
import customerListPL from './components/customerListPL'
import lineListPL from './components/lineListPL'
import allCustomerListPL from "./components/allCustomerListPL";
import allLineListPL from "./components/allLineListPL";
import goodsLineExamine from "./components/goodsLineExamine";
import moveExamine from "./components/moveExamine";

export default {
  name: "customersPL",
  data(){
    return {
      roles:store.getters.roles ? store.getters.roles : [],

      tab:'myCharge',
      type:'customer',

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    departmentPL(){
      if(this.roles.indexOf("departmentPL") != -1){
        return true
      }else{
        return false
      }
    },
    goodsLineExamine(){
      if(this.roles.indexOf("goodsLineExamine") != -1){
        return true
      }else{
        return false
      }
    },
    moveExamine(){
      if(this.roles.indexOf("moveExamine") != -1){
        return true
      }else{
        return false
      }
    },
    productLineCustomers(){
      if(this.roles.indexOf("productLineCustomers") != -1){
        return true
      }else{
        return false
      }
    },
    productLineCustomerManagement(){
      if(this.roles.indexOf("productLineCustomerManagement") != -1){
        return true
      }else{
        return false
      }
    },
  },
  components : {
    retainPL,
    customerSearchPL,
    customerListPL,
    lineListPL,
    allCustomerListPL,
    allLineListPL,
    goodsLineExamine,
    moveExamine
  },
  //
  // beforeRouteEnter(to, form, next) {
  //   next(vm => {
  //     console.log("1111111111")
  //     vm.$refs.lineListPL.init(vm.tab);
  //   });
  // },


  mounted() {
    console.log("1111111111")
    // this.$refs.customerListPL.init(this.tab);
    this.$nextTick(() => {
      // dom元素更新后执行，因此这里能正确打印更改之后的值
      setTimeout(()=>{
        this.$refs.customerListPL.init(this.tab);
      })
    })
  },

  filters: {


  },

  methods:{

    //切换类型
    changeType(){
      if(this.type == 'customer' ||this.type == 'docking' || this.type == 'sub'){  //客户
        if(this.tab == 'myCharge' ||  this.tab == 'share' || this.tab == 'department'){
          this.$nextTick(() => {
            // dom元素更新后执行，因此这里能正确打印更改之后的值
            setTimeout(()=>{
              this.$refs.customerListPL.init(this.tab);
            })

          })
        }else if(this.tab == 'delete' ||  this.tab == 'common') {
          this.$nextTick(() => {
            // dom元素更新后执行，因此这里能正确打印更改之后的值
            setTimeout(()=>{
              this.$refs.allLineListPL.init(this.tab);
            })

          })
        }
      }else { //产品线
        if(this.tab == 'myCharge' ||  this.tab == 'share' || this.tab == 'department' || this.tab == 'myManageGoodsLines'){
          this.$nextTick(() => {
            // dom元素更新后执行，因此这里能正确打印更改之后的值
            setTimeout(()=>{
              this.$refs.lineListPL.init(this.tab);
            })

          })
        }else if(this.tab == 'delete' ||  this.tab == 'common') {
          this.$nextTick(() => {
            // dom元素更新后执行，因此这里能正确打印更改之后的值
            setTimeout(()=>{
              this.$refs.allLineListPL.init(this.tab);
            })

          })
        }
      }
    },


    /**
     * 切换选择状态
     */
    handleSelect(key, keyPath){
      this.tab = key;
      if(key == 'myCharge' ||  key == 'share' || key == 'department'){
        this.type = 'customer';
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          setTimeout(()=>{
            this.$refs.customerListPL.init(this.tab);
          })

        })
      }else if(key == 'delete' ||  key == 'common'){
        this.type = 'line';
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          setTimeout(()=>{
            this.$refs.allLineListPL.init(this.tab);
          })

        })
      }else if(key == 'myManageGoodsLines'){
        this.type = 'line';
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          setTimeout(()=>{
            this.$refs.lineListPL.init(this.tab);
          })

        })
      }else if(key == 60){
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          setTimeout(()=>{
            this.$refs.retainPL.getList()
          })

        })
      }else if(key == 70){
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          // setTimeout(()=>{
          //   this.$refs.customerSearchPL.getList()
          // })

        })
      }else if(key == 80){
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          setTimeout(()=>{
            this.$refs.goodsLineExamine.getList()
          })
        })
      }else if(key == 90){
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          setTimeout(()=>{
            this.$refs.moveExamine.getList()
          })
        })
      }
    },


  },
}
</script>

<style  lang="scss">

.mergeCell .vxe-cell{padding:0;}
.mergeDiv{
  padding-left:10px;
  padding-right:10px;
  border-bottom:1px solid #e8eaec;
  min-height: 36px;
}

.mergeDiv:last-child{
  border-bottom: 0;
}
</style>
